<!DOCTYPE html>  
<html>  
<head>  
<title>货源查询</title>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">  
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" type="text/css">  
<script src="js/jquery-1.8.1.min.js" type="text/javascript" charset="utf-8"></script>  
<script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript" charset="utf-8"></script>  
<script src="js/RegionData22.js" type="text/javascript" charset="gb2312"></script>  
<script type="text/javascript">  
$(document).ready(function(){
    var allRegionData = get_all_region_data();
    var mapProvince = get_region_province(allRegionData);
    $.each(mapProvince,function(k, v){
    	$('#select-province')[0].options.add(new Option(v, k));
    });
    $('#select-province').change(function(){
    	changeSelRegion(this,$('#select-city'), allRegionData, 'c', {}, true )
    });
    $('#select-city').change(function(){
    	changeSelRegion(this,$('#select-region'), allRegionData, 'r', {}, true )
    });
    $('#select-province').trigger('change');
});  
</script>    
</head>  
<body> 
	<!-- page one -->
    <div data-role="page" id="one">  
  
        <div data-role="header">  
            <h1>My Title</h1>  
        </div>  
        <!-- /header -->
  
        <div data-role="content">            
            <form>
	            <label for="select-province" class="select">省市:</label>
				<select name="select-province" id="select-province" data-mini="true"></select>
				<label for="select-city" class="select">地州:</label>
				<select name="select-city" id="select-city" data-mini="true"></select>
				<label for="select-region" class="select">区县:</label>
				<select name="select-region" id="select-region" data-mini="true"></select>
				<p><a href="#two" data-role="button">查询</a></p>
            </form>
        </div>  
        <!-- /content -->  
  
    </div>  
    <!-- /page one --> 
    
    <!-- Start of second page: #two -->
	<div data-role="page" id="two" data-theme="c">
	
		<div data-role="header">
			<h1>Two</h1>
		</div><!-- /header -->
	
		<div data-role="content" data-theme="c">	
			<h2>Two</h2>
			<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>	
			<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>	
			<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">返回</a></p>	
			
		</div><!-- /content -->
		
		<div data-role="footer">
			<h4>Page Footer</h4>
		</div><!-- /footer -->
	</div><!-- /page two -->
</body>  
</html>